<template>
	<!-- 小区管理 -->
	<div>
		<!-- 头部 -->
		<el-row>
			<!-- 面包屑 -->
			<el-col>
				<el-breadcrumb separator="/" style="margin-bottom: 10px;">
					<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/quarters' }">小区管理</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<!-- 搜索、操作 -->
			<el-col class="inp">
				<div class="block">
					<span class="demonstration">小区名称：</span>
					<el-input v-model="select_list.communityName" placeholder="请输入要查询的小区名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">创建时间：</span>
					<el-date-picker v-model="dataValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="get_value"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="block">
					<el-button type="primary" @click="get_value">搜索</el-button>
				</div>
			</el-col>
			<el-col style="margin-bottom: 10px;">
				<el-button type="primary" @click="addNew">新增小区</el-button>
			</el-col>
			<!-- 添加表单 -->
			<el-dialog :title="title" :visible.sync="addOrUpdata">
				<el-form :model="addData">
					<el-form-item label="小区名称" label-width="100px">
						<el-input v-model="addData.communityName"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" label-width="100px">
						<el-cascader v-model="addValue" :options="options"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" label-width="100px">
						<el-input v-model="addData.communityAddress"></el-input>
					</el-form-item>
					<el-form-item label="小区坐标" label-width="100px">
						<el-button @click="getBeiDou">获取位置</el-button>
						<span v-show="addData.communityLongitude">
							{{addData.communityLongitude}},{{addData.communityLatitude}}
						</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addOrUpdata = false">取 消</el-button>
					<el-button type="primary" @click="makeAdd">确 定</el-button>
				</div>
			</el-dialog>
		</el-row>
		<!-- 主体 -->
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" border style="width: 100%;" :header-cell-style="tableStyle"
				:cell-style="tableCen">
				<el-table-column prop="communityId" label="ID">
				</el-table-column>
				<el-table-column prop="communityName" label="名称">
				</el-table-column>
				<el-table-column prop="communityCoordinates" label="位置">
				</el-table-column>
				<el-table-column prop="communityUserCount" label="用户数量">
				</el-table-column>
				<el-table-column prop="communityShopCount" label="关联门店">
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160px">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="seeStoresData(scope.row.communityId)">查看关联门店
						</el-link>&nbsp;&nbsp;
						<el-link type="primary" :underline="false" @click="modifyData(scope.row)">编辑小区
						</el-link>&nbsp;&nbsp;
						<el-link type="primary" :underline="false" @click="removerData(scope.row.communityId)">删除
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- 查看关联门店表单 -->
			<el-dialog title="查看关联门店" :visible.sync="showStores">
				<!-- 搜索 -->
				<el-input placeholder="请输入关联门店名称" v-model="showStoresTable.shopName" clearable
					style="width: 200px; padding: auto 10px;">
				</el-input>
				<el-button type="primary" plain style="margin-left: 10px;" @click="showStoresData()">搜索</el-button>
				<!-- 添加关联门店 -->
				<el-button type="primary" plain @click="addStoresData()">添加关联门店</el-button>

				<!-- 查看关联门店显示 -->
				<el-table :data="StoresTableData" border :header-cell-style="tableStyle" :cell-style="tableCen"
					style="margin-top: 10px;">
					<el-table-column type="index" label="序号">
					</el-table-column>
					<el-table-column prop="shopName" label="名称">
					</el-table-column>
					<el-table-column prop="shopId" label="ID">
					</el-table-column>
					<el-table-column prop="communityUserCount" label="排序">
					</el-table-column>
					<el-table-column prop="shopAddress" label="地址">
					</el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-link type="primary" :underline="false"
								@click="delShowStoresData(scope.row.shopId)">删除</el-link>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-row style="text-align: center; margin-top: 20px;">
					<el-pagination @size-change="showSizeChange" @current-change="showCurrentChange"
						:current-page="showStoresTable.pageNum" :page-sizes="[5, 10, 20, 50]"
						:page-size="showStoresTable.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="showStores_Total">
					</el-pagination>
				</el-row>
				<div slot="footer" class="dialog-footer">
					<el-button @click="showStores = false">取 消</el-button>
				</div>
			</el-dialog>

			<!-- 添加关联门店表格显示 -->
			<el-dialog title="添加关联门店" :visible.sync="addStores">
				<!-- 搜索 -->
				<el-input placeholder="请输入关联门店名称" v-model="addStoresTable.shopName" clearable
					style="width: 200px; padding: auto 10px;">
				</el-input>
				<el-button type="primary" plain style="margin-left: 10px;" @click="showStoresData()">搜索</el-button>
				<!-- 添加关联门店显示 -->
				<el-table :data="addStoresTableData" border :header-cell-style="tableStyle" :cell-style="tableCen"
					style="margin-top: 10px;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="shopName" label="名称">
					</el-table-column>
					<el-table-column prop="shopId" label="ID">
					</el-table-column>
					<el-table-column prop="shopAddress" label="坐标">
					</el-table-column>
					<el-table-column prop="shopOrderCount" label="订单数量">
					</el-table-column>
				</el-table>

				<!-- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection">
					</el-table-column>
					<el-table-column label="日期" width="120">
						<template slot-scope="scope">{{ scope.row.date }}</template>
					</el-table-column>
					<el-table-column prop="name" label="姓名" width="120">
					</el-table-column>
					<el-table-column prop="address" label="地址" show-overflow-tooltip>
					</el-table-column>
				</el-table> -->
				<!-- 分页 -->
				<el-row style="text-align: center; margin-top: 20px;">
					<el-pagination @size-change="addSizeChange" @current-change="addCurrentChange"
						:current-page="addStoresTable.pageNum" :page-sizes="[5, 10, 20, 50]"
						:page-size="addStoresTable.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="addStores_Total">
					</el-pagination>
				</el-row>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addStoresValue()">保 存</el-button>
				</div>
			</el-dialog>
		</el-row>
		<!-- 分页 -->
		<el-row style="text-align: center; margin-top: 20px;">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="select_list.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="select_list.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="select_list.total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../assets/data/citydata.js'
	export default {
		data() {
			return {
				// 查询显示条件
				select_list: {
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				// 搜索时间差
				dataValue: '',
				// 添加数据
				addValue: [],
				addData: {
					addOrUpdateFlag: 1, //1添加2修改
					communityAddress: "", //详细位置
					communityAreaCode: "",
					communityCity: "", //市
					communityCoordinates: "", //总地址
					communityDistrict: "", //区
					communityId: "",
					communityLongitude: "", //经
					communityLatitude: "", //纬
					communityName: "", //小区名称
					communityProvince: "", //省
				},
				// 弹出窗口
				title: '新增小区', //窗口标题
				addOrUpdata: false, //窗口显示与否
				options: citys, //级联选择框数据来源
				// 表格数据
				tableData: [],
				// 查看关联门店
				nowShowStoresID: 0,
				StoresTableData: [],
				showStoresTable: {
					shopName: '',
					communityId: 0,
					pageNum: 1,
					pageSize: 10,
				},
				showStores_Total: 0,
				showStores: false,
				// 添加关联门店
				addStoresTableData: [],
				addStoresTable: {
					shopName: '',
					communityId: 0,
					pageNum: 1,
					pageSize: 10,
				},
				addStores_Total: 0,
				addStores: false,
				multipleSelection: [],
				// 样式
				tableStyle: {
					'background-color': '#409eff',
					'color': 'white',
					'text-align': 'center'
				},
				tableCen: {
					'text-align': 'center'
				}
			}
		},
		methods: {
			// 添加门店全选框
			handleSelectionChange(val) {
				// console.log(val)
				for (let id of val) {
					this.multipleSelection.push(id.shopId)
				}
			},
			// 添加关联门店数据
			addStoresValue() {
				// console.log(this.multipleSelection)
				this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/addAssociatedStores', {
						// 'panghuCommunityId': this.nowShowStoresID,
						'panghuCommunityId': this.nowShowStoresID,
						'fendeShopCommunityList': this.multipleSelection,
					})
					.then((res) => {
						console.log(res)
						if (res.data.status == 200) {
							this.$message.success('添加关联门店数据成功')
							this.addStores = false
							this.showStores = true
							this.showStoresData()
						} else {
							this.$message.error('添加关联门店数据失败')
						}
					})
			},
			// 添加关联门店显示
			addStoresData() {
				// console.log(this.nowShowStoresID)
				this.showStores = false
				this.addStores = true
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/findShopListByAdd', {
						params: this.addStoresTable
					})
					.then((res) => {
						// console.log(res)
						this.addStoresTableData = res.data.data.list
						this.addStores_Total = res.data.data.total
					})
			},
			// 每页条数改变
			addSizeChange(size) {
				this.addStoresTable.pageSize = size
				this.addStoresData()
			},
			// 页码改变
			addCurrentChange(num) {
				this.addStoresTable.pageNum = num
				this.addStoresData()
			},
			// 查看关联门店
			seeStoresData(id) {
				this.nowShowStoresID = id
				this.showStoresTable.communityId = id
				this.showStoresData()
			},
			// 显示关联门店
			showStoresData() {
				this.showStores_Total = this.tableData.communityShopCount
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresList', {
						params: this.showStoresTable
					})
					.then((res) => {
						// console.log(res.data.data)
						this.StoresTableData = res.data.data.list
						this.showStores_Total = res.data.data.total
					})
				this.showStores = true
			},
			// 每页条数改变
			showSizeChange(size) {
				this.showStoresTable.pageSize = size
				this.showStoresData()
			},
			// 页码改变
			showCurrentChange(num) {
				this.showStoresTable.pageNum = num
				this.showStoresData()
			},
			// 删除关联门店
			delShowStoresData(id) {
				// console.log(id)
				this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post(
							'http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresRemove', {
								panghuCommunityId: this.nowShowStoresID,
								panghuShopId: id,
							})
						.then((res) => {
							// console.log(res)
							if (res.data.status == 200) {
								this.$message.success('关联门店删除成功')
								this.showStoresData()
							} else {
								this.$message.error('关联门店删除失败')
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 添加操作
			addNew() {
				this.addData = {}
				this.title = '新增小区'
				this.addData.addOrUpdateFlag = 1
				this.addOrUpdata = true
			},
			// 修改操作
			modifyData(data) {
				// console.log(data)
				this.addData = data
				this.title = '修改小区'
				this.addData.addOrUpdateFlag = 2
				this.addValue = [data.communityProvince, data.communityCity, data.communityDistrict]
				this.addOrUpdata = true
			},
			// 删除操作
			removerData(id) {
				this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// console.log(id)
					this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/community/communityRemove', {
							communityId: id
						})
						.then((res) => {
							// console.log(res)
							if (res.data.status == 200) {
								this.$message.success('数据删除成功')
								this.get_value()
							} else {
								this.$message.error('数据删除失败')
							}
						})
						.catch((error) => {
							this.$message.error('服务器失联' + error)
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 添加操作
			makeAdd() {
				this.splicing()
				this.$http.post('http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate', this.addData)
					.then((res) => {
						// console.log(res)
						if (res.data.status == 200) {
							this.$message.success('数据添加成功')
							this.get_value()
						} else {
							this.$message.error('数据添加失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
				this.addOrUpdata = false
			},
			// 拼接地址
			splicing() {
				this.addData.communityCoordinates = this.addData.communityProvince + this.addData.communityCity +
					this.addData.communityDistrict + this.addData.communityAddress;
			},
			// 获取位置
			getBeiDou() {
				this.splicing()
				// console.log(this.addData.communityCoordinates)
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: this.addData.communityCoordinates
						}
					})
					.then((res) => {
						// console.log(res.data.geocodes[0])
						this.addData.communityLongitude = res.data.geocodes[0].location.split(',')[0]
						this.addData.communityLatitude = res.data.geocodes[0].location.split(',')[1]
						// console.log(this.addData)
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 每页条数改变
			handleSizeChange(size) {
				this.select_list.pageSize = size
				// console.log(this.select_list.pageSize)
				this.get_value()
			},
			// 页码改变
			handleCurrentChange(num) {
				this.select_list.pageNum = num
				// console.log(this.select_list.pageNum)
				this.get_value()
			},
			// 获取数据
			get_value() {
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/community/communityList', {
						params: this.select_list
					})
					.then((res) => {
						// console.log(res.data.data)
						if (res.status == 200) {
							this.tableData = res.data.data.list
							for (let th of this.tableData) {
								th.communityCoordinates =
									th.communityProvince + '-' +
									th.communityCity + '-' +
									th.communityDistrict + '-' +
									th.communityAddress;
							}
							this.select_list.total = res.data.data.total
						} else {
							this.$message.error('数据获取失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			}
		},
		mounted() {
			this.get_value()
		},
		watch: {
			// 监听搜索日期变化
			dataValue(newData) {
				this.select_list.startTime = newData[0]
				this.select_list.endTime = newData[1]
			},
			// form级联框改变
			addValue(newValue) {
				this.addData.communityProvince = newValue[0]
				this.addData.communityCity = newValue[1]
				this.addData.communityDistrict = newValue[2]
			}
		},
	}
</script>

<style>
	.inp {
		margin-bottom: 10px;
		display: flex;
		flex-flow: nowrap;
		justify-content: start;
	}

	.inp .block {
		margin-right: 20px;
	}
</style>